import React, { Suspense, lazy } from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import { Button } from 'antd'
// import Home from './pages/home'
// import About from './pages/about'

const Home = lazy(() => import('./pages/home'))
const About = lazy(() => import('./pages/about'))

function App() {
  return (
    <>
      <h1>App</h1>
      <Button type='primary'>点我</Button>
      <ul>
        <li>
          <Link to='/home'>Home</Link>
        </li>
        <li>
          <Link to='/about'>About</Link>
        </li>
      </ul>

      <Suspense fallback={<div>loading...</div>}>
        <Routes>
          <Route path='/home' element={<Home />} />
          <Route path='/about' element={<About />} />
        </Routes>
      </Suspense>
    </>
  )
}

export default App
